<template>
  <div class="prop">
    <div class="prop-container">
      <el-dialog
        title="会员人数"
        :visible.sync="openBigscreendialog"
        width="80%"
        :style="{ top: '50px' }"
        :before-close="handleClose"
        :modal-append-to-body="false"
      >
        <div>
          <!-- <el-table :data="gridData" :style="{ position: 'relative' }">
                        <el-table-column
              property="name"
              label="姓名"
              width="250"
            ></el-table-column>
            <el-table-column
              property="date"
              label="电话"
              width="250"
            ></el-table-column>
               <el-table-column
              property="date"
              label="所属商会"
              width="250"
            ></el-table-column>
                <el-table-column
              property="date"
              label="是否为党员"
              width="250"
            ></el-table-column>
             <el-table-column property="address" label="是否明星会员" width="250"></el-table-column>
          </el-table> -->
          <Info></Info>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
// 使用辅助函数
import Info from "../system/user/profile/index.vue";
export default {
  name: "introduce",
  components: { Info },
  props: {
    openBigscreendialog: {
      type: Boolean,
      default: false,
    }
  },

  data() {
    return {

    };
  },

  methods: {
    // ...mapMutations(['SHOW_HIDEEN']),
    handleClose(e) {
  this.$emit('changeBigscreen',false)
    },
  },
};
</script>

<style lang="scss" scoped>
.prop {
  // position: relative;

  .prop-container {
    width: 80%;
    height: 80% !important;

    ::v-deep .el-dialog {
      background: url("../../assets/images/prop.png") no-repeat center center;
      background-size: 100% 100% !important;
      height: 80%;
    }
    ::v-deep .el-dialog__body {
      padding-bottom: 80px !important;
      .el-table {
        color: #fff;
        background-color: #ffffff00 !important;
        // height: 80% !important;
      }
    }

    ::v-deep .el-dialog__header {
      background: url("../../assets/images/lng_title_bg1.png") no-repeat center
        center;
      background-size: 90% 60% !important;
      padding: 10px;
      .el-dialog__title {
        padding: 0 150px !important;
        color: #fff !important;
      }
    }
  }
}
::v-deep .el-table th,
::v-deep .el-table tr,
::v-deep .el-table td {
  //  background-color: red !important;
  // background: transparent !important;
  background: rgba(1, 51, 122, 0%);
  border: 0; //去除表格
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}
::v-deep .el-table .el-table__header-wrapper th {
  color: #fff !important;
  font-size: 18px !important;
}
.el-table th.el-table__cell.is-leaf {
  border-bottom: #e6ecdf00 !important;
}
.el-table::before {
  background-color: #e6ebf508;
}
::v-deep .el-dialog__body {
  padding: 30px 140px !important;
}
::v-deep .pagination-container {
  background: none; //#1a4676
}
::v-deep .el-input--small .el-input__inner {
  background-color: #1a4676;
}
::v-deep .el-form--inline .el-form-item__label {
  color: #fff;
}
::v-deep .el-select .el-input.is-focus .el-input__inner {
  background-color: #1a4676;
}
::v-deep .el-pagination.is-background .btn-prev {
  background: #1a4676;
}
::v-deep .el-pagination.is-background .btn-next {
  background-color: #1a4676;
}
::v-deep .el-pagination .el-select .el-input .el-input__inner {
  background-color: #1a4676;
  color: #fff;
}
::v-deep .el-pagination__editor.el-input .el-input__inner {
  background-color: #1a4676;
  color: #fff;
}
::v-deep .cell .el-tag {
  background-color: #1a4676;
}
::v-deep .el-table::before {
  background-color: #1a4676 !important;
}
::v-deep .el-table__body tbody tr:hover > td {
  background-color: #666 !important;
}
::v-deep .el-pagination__total {
  color: #fff !important;
}
::v-deep .el-pagination__jump {
  color: #fff !important;
}
//  嵌套弹框样式
</style>
